<template>
  <h4 class="title_lv2">关于Dialog 模态框</h4>
  <div class="statement">
    <!-- <ol>
      <li>{{ demoProp.title }}头部可以不使用插槽</li>
      <li>{{ demoProp.title }}抽屉默认样式属性 modal-class="merak_modal"</li>
    </ol> -->
  </div>

  <div class="hr das"></div>

  <h4 class="title_lv2">{{ demoProp.title }} 居中弹出</h4>
  <div class="statement">
    <ol>
      <li>模态框默认宽度为  width="40%"</li>
  
    </ol>
  </div>
  <div>
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">打开居中模态框</el-button>
    <el-dialog 
      modal-class="merak_modal"
      v-model="drawer"
      title="I am the title"
      direction="rtl"
      :before-close="handleClose"
      width="40%"
    >
      <template #header>
        <div class="merak_modal_title">创建私密交易订单</div>
      </template>

      <div>
        <el-form label-position="top" ref="ruleFormRef" size="default" :model="ruleform" :rules="rules">
          <el-divider content-position="left">Rabindranath Tagore</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="Activity name" prop="name">
                <el-input v-model="ruleform.name" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="Activity region" prop="region">
                <el-input v-model="ruleform.region" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-input :value="543556456" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-input :value="54333335" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-input :value="5435" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-input :value="5435" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">Rabindranath Tagore</el-divider>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-input :value="5435" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="Activity name">
                <el-select v-model="value" placeholder="Select">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <template #footer>
        <el-button type="default" @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>

      </template>
    </el-dialog >
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

   
</template>
      
<script lang="ts" setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { demoProps } from "@/stores/modules/merakDemo";
import Prism from "prismjs";
import "../prism.css";
import dropWrap from "../dropWrap.vue";

/* 页面常量 */
const rulesMsg = {
  reuqired: "这是必填选项！"
};

const formChangeType = "blur";

/* 响应式变量 */
const drawer = ref(false);
const direction = ref("rtl");
const demoProp = demoProps();

//变量 htm 用于存放 组件源码 code
let htm = ref<string>(`
    <el-dialog  modal-class="merak_modal"  v-model="drawer" title="I am the title" direction="rtl" :before-close="handleClose" size="60%">
      <template #header>
        <div class="merak_modal_title">创建私密交易订单</div>
      </template>
      内容

      <template #footer>
        <el-button type="default" @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>

      </template>
    </el-dialog>
      `);
 
const value = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
];

/* 表单 ruleform interface*/

interface RuleForm {
  name: string;
  region: string;
  count: string;
  date1: string;
  date2: string;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}

/*表单尺寸 */
const formSize = ref("default");
/* 表单元素实例 */
const ruleFormRef = ref<FormInstance>();
/* 表单模拟数据 */
const ruleform = reactive<RuleForm>({
  name: "MERAK2.0",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: true,
  type: ["3", "fds"],
  resource: "",
  desc: ""
});

/* 表单验证规则 */
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "必填选项", trigger: "blur" },
    { min: 5, max: 10, message: "长度在5和10之间", trigger: "blur" }
  ],
  region: [{ required: true, message: "必填选项", trigger: "change" }]
});

/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});

const handleClose = () => {
  console.log("Fdsdsa");
  drawer.value = false;
};

/* 表单提交 */

const submitForm = async (formEl: FormInstance) => {
  if (!formEl) return;

  await formEl.validate((valid, fields) => {
    console.log(valid, fields);
    if (valid) {
      console.log("验证通过，可以提交");
      return;
    }
    console.log("验证失败");
    console.log(fields);
  });
};
</script>
      <style lang="scss" scoped>
.el-row::v-deep {
  margin-bottom: 20px;
}
</style>
      